* {
                margin: 0;
                padding: 0;
            }

            li {
                list-style: none;
                margin: 0 20px;
                text-align: center;
            }

            h2 {
                font-size: 28px;
            }

            h2 strong {
                font-size: 14px;
                color: #5b666b;
                float: right;
                margin-right: 30px;
            }

            .list li img {
                width: 90%;
            }

            .list li p {
                font-size: 12px;
            }

          @media all and (min-width:1024px){
              .box {
                  width: 1024px;
                  padding: 30px;
                  margin: 10px auto 0;
                  border: 1px solid red;
                  background: red;
              }

              .list {
                  margin-top: 30px;
                  display: flex;
                  justify-content: space-around;

              }
          }

          @media all and (min-width: 640px) and (max-width:1023px){
              .box {
                  width: 640px;
                  padding: 30px;
                  margin: 10px auto 0;
                  border: 1px solid red;
                  background: pink;
              }

              .list {
                  margin-top: 30px;
                  display: flex;
                  flex-wrap: wrap;

              }
          }
          @media all and (min-width: 320px) and (max-width:639px){
              .box {
                  width: 320px;
                  padding: 30px;
                  margin: 10px auto 0;
                  border: 1px solid red;
                  background: yellow;
              }

              .list {
                  margin-top: 30px;
                  display: flex;
                  flex-wrap: wrap;
              }
          }